<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title>供应商系统</title>
		<link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.css"/>
		<link rel="stylesheet" href="/Public/css/style.css" />
		<link rel="stylesheet" type="text/css" href="/Public/css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="/Public/css/statistics.css"/>
		<link rel="stylesheet" type="text/css" href="/Public/css/bootstrap-datetimepicker.css"/>
	</head>
	<body>
		<header class="header">
				<a href="javascript:;" onclick="history.go(-1)" class="back"><i class="fa fa-angle-left"></i></a>
				<h1>销售统计</h1>
		</header>
		<div id="app">
			<nav class="nav">
				<ul>
					<li class="active">昨日</li>
					<li>近7天</li>
					<li>近30天</li>
					<li>自定义</li>
				</ul>
			</nav>
			<section class="sta-table bordertop">				
				<div class="toggle">
					<h2><i class="fa fa-caret-down"></i>销售统计表</h2>
					<span class="time" v-show="showtime">{{text.time}}</span>
					<div class="time" v-show="!showtime" style="width: 200px;">
						<div class="col-xs-5" style="padding: 0;">
							<div class="input-group date" id="starttime">
	                            <input class="form-control starttime"  type="text" value=""  readonly placeholder="开始时间">				                   
	                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                       		</div>				                       		 
						</div>	
						<div class="col-xs-2" style="padding: 0;text-align: center;">
							 至
						</div>
                       <div class="col-xs-5" style="padding: 0;">
                       		 <div class="input-group date" id="endtime">
	                            <input class="form-control starttime"  type="text" value=""  readonly placeholder="截止时间">				                   
	                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                       		 </div>
                       </div>
					</div>
				</div>	
				<div class="tablebox">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th class="text-center">商品标题</th>
								<th class="text-center sort" @click="sorttype(0,$event)" v-if="stock">当前库存<i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></th>
								<th class="text-center sort" @click="sorttype(1,$event)">销售额/元<i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></th>
								<th class="text-center sort" @click="sorttype(2,$event)">销售数量<i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></th>
							</tr>
						</thead>
						<tbody>
							<tr class="text-center" v-for="(item,index) in items" v-if="index>=2?more:'ture'">
								<td style="width: 120px;">{{item.name}}</td>
								<td v-if="stock">{{item.stock}}</td>
								<td>{{item.money}}</td>
								<td>{{item.num}}</td>
							</tr>
							<tr class="text-center" @click="more='ture'" v-if="!more">
								<td colspan="4" class="more">展开全部<i class="fa fa-caret-down" style="margin-left: 5px;"></i></td>
							</tr>
							<tr class="text-center">
								<td colspan="4">总销售额：{{allmoney.toFixed(1)}}元</td>
							</tr>
						</tbody>
					</table>
				</div>
			</section>
			<section class="sta-table bordertop">
				<div class="toggle">
					<h2><i class="fa fa-caret-down"></i>{{text.charts}}</h2>
				</div>
				<div  class="tablebox">
					 <div v-show="yesterday">
					 	<div id="echarts" style="width: 100%;height:300px;"></div>
					 </div>			
					<div v-show="!yesterday">
						<nav class="view-nav">
							<ul>
								<li class="active">按销售额</li>
								<li>按销量</li>
							</ul>
						</nav>
						<div id="piechart" style="width: 100%;height:500px;"></div>
					</div>
				</div>
			</section>
		</div>	
		<script src="/Public/js/jquery-2.1.0.js"></script>
		<script src="/Public/js/echarts.js"></script>
		<script src="/Public/js/bootstrap.js"></script>
		<script src="/Public/js/bootstrap-datetimepicker.js"></script>
		<script src="/Public/js/vue.js"></script>
		<script src="/Public/js/vue-resource.js"></script>
		<script src="/Public/js/statistics.js"></script>
	</body>
</html>
